<template>
  <div style="margin: auto;">
    <div style="width: 600px;height: 40px;margin: auto;margin-top: 300px;text-align: center;">
        <h3>登录页面</h3>
    </div>
    <div style="width: 600px;height: 400px;margin: auto;">

        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="密码登录" name="first"></el-tab-pane>
        <el-tab-pane label="短信登录" name="second"></el-tab-pane>
        </el-tabs>

        <div v-show="activeName=='first'">
            <el-form :model="loginForm" :rules="formRules" ref="loginForm" label-width="100px">
                <el-form-item label="登录账号" prop="userName">
                    <el-input v-model="loginForm.userName"></el-input>
                </el-form-item>
                <el-form-item label="登录密码" prop="userPass">
                    <el-input v-model="loginForm.userPass"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitLogin('loginForm')">立即登录</el-button>
                    <el-button @click="resetForm('loginForm')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>

        <div v-show="activeName=='second'">
            <el-form :model="smsForm" ref="smsForm" label-width="100px">
                <el-form-item label="手机号" prop="userMobile">
                    <el-input v-model="smsForm.userMobile"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="userCode">
                    <el-input v-model="smsForm.userCode"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button @click="sendCode('loginForm')">发送验证码</el-button>
                    <el-button type="success" @click="codeLogin('loginForm')">立即登录</el-button>
                </el-form-item>
            </el-form>
        </div>

    </div>
  </div>
</template>

<script>
import {userLogin,sendSms,smsLogin} from '@/api/userApi.js'

export default {
    name: 'LoginPage',
    data() {
        return {
            activeName: 'first',
            loginForm: {
                userName: '',
                userPass: ''
            },
            smsForm: {
                userMobile: '',
                userCode: ''
            },
            formRules: {
                userName: [
                    { required: true, message: '请输入登录账号', trigger: 'blur' }
                ],
                userPass: [
                    { required: true, message: '请输入登录密码', trigger: 'blur' }
                ],
            },
        }
    },
    mounted() {

    },
    methods: {
        submitLogin(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    
                    userLogin(this.loginForm).then(res => {
                        console.log('userLogin', res)
                        if(res.data.code == 200) {
                            let user = res.data.data
                            console.log('user', user)
                            // 浏览器（不是页面）关闭，数据就会被删除，最好存储为字符串
                            window.sessionStorage.setItem('user', JSON.stringify(user));
                            window.sessionStorage.setItem('token', user.token);
                            // 浏览器关闭，也不会删除；卸载浏览器，在安装浏览器；通过浏览器手动删除
                            //window.localStorage

                            // 跳转到列表页
                            this.$router.push('/index')
                        }
                        else {
                            let msg = res.data.msg;
                            this.$message.error(msg)
                        }
                    })

                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        resetForm(formName) {

        },
        handleClick(tab, event) {
            console.log(tab, event);
            console.log('activeName', this.activeName)
        },
        sendCode(formName) {
            if(this.smsForm.userMobile == '') {
                this.$message.error('没有输入手机号')
                return
            }
            let param = {}
            param.mobile = this.smsForm.userMobile
            param.code = this.smsForm.userCode
            sendSms(param).then(res => {
                if(res.data.code == 200) {
                    this.$message.success('验证码发送成功')
                }
            })
        },
        codeLogin(formName) {
            if(this.smsForm.userMobile == '') {
                this.$message.error('没有输入手机号')
                return
            }
            if(this.smsForm.userCode == '') {
                this.$message.error('没有输入验证码')
                return
            }
            let param = {}
            param.mobile = this.smsForm.userMobile
            param.code = this.smsForm.userCode
            smsLogin(param).then(res => {
                if(res.data.code == 200) {
                    let user = res.data.data
                        console.log('user', user)
                        window.sessionStorage.setItem('user', JSON.stringify(user));
                        window.sessionStorage.setItem('token', user.token);

                        // 跳转到列表页
                        this.$router.push('/index')
                }
            })
        },
    }
}
</script>

<style>

</style>
